<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单输入</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="Application">
      <!--
        修饰符.lazy当用户完成输入，即输入框失去焦点后，段落中才会同步到输入框中最终的文本数据
        <input v-model.lazy="textField" />  -->
      <!--
        修饰符.trim用于截断处理首尾空格
        <input v-model.trim="textField" />
      -->
      <input v-model="textField" />
      <p>文本框输入内容：{{textField}}</p>
      <textarea v-model="textarea"></textarea>
      <p style="white-space: pre-line;">多行文本内容：{{textarea}}</p>
      <div>
        <input type="checkbox" value="足球" v-model="checkList" /> 足球
        <input type="checkbox" value="篮球" v-model="checkList" /> 篮球
        <input type="checkbox" value="排球" v-model="checkList" /> 排球
        <p>复选框内容：{{checkList}}</p>
      </div>
      <div>
        <input type="radio" value="男" v-model="sex" /> 男
        <input type="radio" value="女" v-model="sex" /> 女
        <p>单选框内容：{{sex}}</p>
      </div>
      <select v-model="select" multiple>
        <option>足球</option>
        <option>篮球</option>
        <option>排球</option>
      </select>
      <p>选择列表内容：{{select}}</p>
    </div>
  </body>

  <script>
    const App= {
      data(){
        return {
          textField:"",
          textarea:"",
          checkList:[],
          sex:"",
          select:[]
        }
      }
    }
    Vue.createApp(App).mount("#Application")
  </script>

</html>